<template>
  <div>
    <el-dialog
      top="5vh"
      :title="title"
      :visible.sync="visible"
      :width="width + 'px'"
      :before-close="onClose"
      :close-on-click-modal="false"
    >
      <div class="container1" :style="{ height: height + 'px' }">
        <slot name="content"></slot>
      </div>
      <span slot="footer" class="dialog-footer">
        <el-button @click="onClose" size="mini">取 消</el-button>
        <el-button type="primary" @click="onConfirm" size="mini"
          >确 定</el-button
        >
      </span>
    </el-dialog>
  </div>
</template>

<script>
export default {
  props: {
    title: {
      type: String,
      default: "标题",
    },
    visible: {
      type: Boolean,
      default: false,
    },
    width: {
      type: Number,
      default: 600,
    },
    height: {
      type: Number,
      default: 250,
    },
  },
  data() {
    return {};
  },
  methods: {
    onClose() {
      this.$emit("onClose");
    },
    onConfirm() {
      this.$emit("onConfirm");
    },
  },
};
</script>
<style  scoped>
.container1 {
  overflow-x: initial;
  overflow-y: auto;
}
/* .el-dialog__wrapper {
        ::v-deep .el-dialog {
            border-top-left-radius: 7px !important;
            border-top-right-radius: 7px !important;
            .el-dialog__header {
                
                border-top-left-radius: 7px !important;
                border-top-right-radius: 7px !important;
                background-color: #1890ff;
                .el-dialog__title {
                    color: #fff;
                    font-size: 15px;
                    font-weight: 700;
                }
                    .el-dialog__close {
                    color: #fff;
                }
            }
            .el-dialog__body {
                padding: 10px 10px !important;
            }
            .el-dialog__footer {
                border-top: 1px solid #e8eaec !important;
                padding: 10px !important;
            }
        } */
/* } */
</style>